<template>
	<view>
		<view class="h-130 bg-blue-1 py-12 px-20 flex flex-x-space-between text-white ">
			<view class="flex flex-column flex-y-center gap-6">
				<text class="fs-18">我的算力</text>
				<text class="fs-36 fw-bold">{{USERINFO?.points}}</text>
			</view>
			<image src="/static/image/sl.png" class="w-90 h-90"></image>
		</view>
		<view class="relative top--20 py-15 px-12 bg-white round-top-8">
			<text class="fs-18 fw-bold">选择套餐</text>
		</view>
		<scroll-view class=" w-p-100" :scroll-x="true">
			<view class="py-10 px-12 flex flex-y-center gap-16">
				<view :class="id==item.id?'bg-blue-1 border-blue-1':'bg-grey border-grey'"
					class=" round-14 overflow-hidden  relative w-140 " style="min-width: 140px;"
					v-for="(item,index) in list" :key='item.id' @click="id=item.id;price=item.price">
					<view v-if="item.give!=0" :class="id==item.id?'bg-blue-1':'bg-grey'"
						class="absolute  top-0 left-0  fs-14 pl-4 pr-20 round-bottom-right-16 text-white">
						送:{{item.give}}
					</view>
					<view class="bg-white w-p-100 flex flex-column gap-4 round-8 h-100 flex flex-center">
						<text class="fs-18 text-ellipsis-1 text-333">{{item.title}}</text>
						<text class=" fs-20 fw-bold" :class="id==item.id?'text-blue-1':''">{{item.points}}</text>
					</view>
					<view class="flex flex-column flex-center gap-2 py-8 " :class="id==item.id?'text-white':'text-666'">
						<view class="flex flex-y-baseline">
							<text class="fs-12">￥</text>
							<text class="fs-20">{{ $tool.formatNumber( item.price)}}</text>
						</view>
						<text class="fs-12  text-s">￥{{item.original_price}}</text>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="p-12">
			<text class="fs-18 fw-bold">充值说明</text>
				<mp-html :content="detail?.content"></mp-html>
		</view>

		<!-- <view class=" py-10">
			<scroll-view class=" w-p-100" :scroll-x="true">
				<view class="py-10 flex flex-y-center gap-16">
					<view :class="id==item.id?'bg-blue':'bg-3a'" class=" round-10 p-2 relative w-140 "
						style="min-width: 140px;" v-for="(item,index) in list" :key='item.id'
						@click="id=item.id;price=item.price">
						<view v-if="item.give!=0" :class="id==item.id?'bg-blue':'bg-3a'"
							class="absolute flex flex-y-center h-20 top--8 left-0  round-right-30 round-top-left-30 px-8 fs-12">
							赠:<image src="/static/image/sl.png" class="w-12 h-12"></image>{{item.give}}
						</view>
						<view class="bg-21 w-p-100 flex flex-column gap-4 round-10 h-100 flex flex-center">
							<text class="fs-18 text-ellipsis-1">{{item.title}}</text>
							<view class="flex flex-y-center fs-22">
								<image src="/static/image/sl.png" class="w-24 h-24"></image>
								{{item.points}}
							</view>
						</view>
						<view class="flex flex-column flex-center gap-2 py-8">
							<view class="flex flex-y-baseline">
								<text class="fs-12">￥</text>
								<text class="fs-20">{{ $tool.formatNumber( item.price)}}</text>
							</view>
							<text class="fs-12 text-999 text-s">原价：{{item.original_price}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

       <view class="py-10">充值说明</view>
		<mp-html :content="detail?.content"></mp-html>
		<view class="bg-21 p-16 absolute bottom-0 left-0 right-0">
			<button class="btn-blue mb-10" @click="create">立即支付 ￥{{price}}</button>
		</view> -->
		<y-footer mode  @success="create">立即支付 ￥{{price}}</y-footer>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { getList } from '@/api/plans.js'
	import { createOrder } from '@/api/order.js'
	import { getTags } from '@/api/system.js'
	import { pay } from '@/utils/pay.js'
	import { onLoad } from "@dcloudio/uni-app"
	import { $tool } from '@/utils'
	import { useRefs, useUserStore, useWebConfigStore } from '@/stores'
	const { USERINFO } = useRefs(useUserStore())
	const list = ref([])
	const id = ref(0)
	const price = ref(0)
	const detail = ref()
	onLoad(() => {
		getPlansList()
		getTag()
	})

	const getTag = () => {
		getTags({ key: 'recharge' }).then(res => {
			detail.value = res.data
		})
	}

	const getPlansList = () => {
		getList().then(res => {
			list.value = res.data
			if (list.value.length > 0) {
				id.value = list.value[0].id
				price.value = $tool.formatNumber(list.value[0].price)
			}
		})
	}

	const create = () => {
		let source = 'applet'
		// #ifdef H5
		source = 'official'
		// #endif
		uni.showLoading({
			title: '支付中...'
		})
		createOrder({ id: id.value, source: source }).then(res => {
			pay(source, res.data)
		})
	}
</script>

<style>
	page {
		background-color: white;
	}
	.fs-36{
		font-size: 36px;
	}
</style>